<template>
  <div class='areaCode'>
    <com-header right-icon='icon'>
      <div class="titleText" slot='title'>{{title}}</div>
    </com-header>
    <mt-index-list>
      <mt-index-section
        v-for="(item,index) in eareCode"
        :key='index'
        :index="item[0].code.substr(0,1)">

        <div
          class="cellList"
          v-for="(_item,_index) in item"
          :key="_index"
          @click='() =>_handleEareCode(_item.area_code)'
        >
          <div class="left">{{_item.name_en}}</div>
          <div class="rigth">{{_item.area_code}}</div>
        </div>
      </mt-index-section>
    </mt-index-list>
  </div>

</template>

<script>
  import ComHeader from '../../components/common/Header'
  import code from '~/assets/utils/earecode'

  export default {
    layout: 'other',
    components: { ComHeader },
    asyncData() {
      return {}
    },
    data() {
      return {
        title: 'Region',
        eareCode: code
      }
    },
    mounted() {
    },
    methods: {
      _handleEareCode(code) {
        this.$store.commit('_setEareCode', code)
        this.$router.push({path:'/login'})
      }
    }
  }
</script>
<style lang="scss">
  a:hover {
    text-decoration: none;
  }

  .mint-indexlist-content {
    margin-right: 46px !important;
  }

  .mint-indexlist-nav {
    min-width: 46px !important;
  }

  .mint-indexsection-index {
    padding: 20px;
    font-size: 28px;
    font-weight: 600;
    color: #888;
  }

  .mint-indexlist-navitem {
    padding: 6px;
    font-size: 26px;
  }

  .cellList {
    background-color: #fff;
    box-sizing: border-box;
    color: inherit;
    min-height: 96px;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    display: flex;
    line-height: 96px;
    padding: 0 20px;
    font-size: 32px;
    justify-content: space-between;

    &:hover {
      background-color: aqua;
    }

    .rigth {
      color: #888;
    }
  }


  .cellList:last-child {
    background-image: -webkit-linear-gradient(bottom, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: bottom;
  }


</style>
